import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';
import 'package:travel/event/index.dart';
import 'package:travel/model/theme.dart';
import 'package:travel/routes/index.dart';
import 'package:travel/utils/colors.dart';
import 'package:travel/utils/radian.dart';
import 'package:travel/utils/styles.dart';
import 'package:travel/utils/tools.dart';
import 'package:travel/screen/flutter_screenutil.dart';

class PaySuccessController extends GetxController {
  RxList<ThemeTourismModel> pageList = RxList([]);

  @override
  void onInit() {
    initData();
    super.onInit();
  }

  void initData() {
    pageList.add(ThemeTourismModel(
        imgUrl:
            'https://img2.baidu.com/it/u=614279430,1420774946&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
        name: '故宫博物馆',
        level: 5,
        point: 4.6,
        evaluate: 5487,
        distance: 1.2,
        price: 40,
        tags: ['可订明日', '随时退']));
    pageList.add(ThemeTourismModel(
        imgUrl:
            'https://img2.baidu.com/it/u=614279430,1420774946&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
        name: '八达岭长城',
        level: 5,
        point: 4.5,
        evaluate: 5687,
        distance: 1.5,
        price: 35,
        tags: ['可订明日', '随时退']));
    pageList.add(ThemeTourismModel(
        imgUrl:
            'https://img2.baidu.com/it/u=614279430,1420774946&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
        name: '香山公园',
        level: 3,
        point: 4.3,
        evaluate: 3487,
        distance: 1.8,
        price: 20,
        tags: ['可订明日', '随时退']));
    pageList.add(ThemeTourismModel(
        imgUrl:
            'https://img2.baidu.com/it/u=614279430,1420774946&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
        name: '白塔寺',
        level: 5,
        point: 4.6,
        evaluate: 5487,
        distance: 1.2,
        price: 135,
        tags: ['可订明日', '随时退']));
    pageList.add(ThemeTourismModel(
        imgUrl:
            'https://img2.baidu.com/it/u=614279430,1420774946&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
        name: '湖广会馆',
        level: 5,
        point: 4.6,
        evaluate: 5487,
        distance: 1.2,
        price: 78,
        tags: ['可订明日', '随时退']));
    pageList.add(ThemeTourismModel(
        imgUrl:
            'https://img2.baidu.com/it/u=614279430,1420774946&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
        name: '北京古代建筑博物管',
        level: 5,
        point: 4.6,
        evaluate: 5487,
        distance: 1.2,
        price: 98,
        tags: ['可订明日', '随时退']));
    pageList.add(ThemeTourismModel(
        imgUrl:
            'https://img2.baidu.com/it/u=614279430,1420774946&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
        name: '北京杜莎夫人蜡像馆',
        level: 5,
        point: 4.6,
        evaluate: 5487,
        distance: 1.2,
        price: 90,
        tags: ['可订明日', '随时退']));
    pageList.add(ThemeTourismModel(
        imgUrl:
            'https://img2.baidu.com/it/u=614279430,1420774946&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
        name: '中国国家博物管',
        level: 5,
        point: 4.6,
        evaluate: 5487,
        distance: 1.2,
        price: 119,
        tags: ['可订明日', '随时退']));
    pageList.add(ThemeTourismModel(
        imgUrl:
            'https://img2.baidu.com/it/u=614279430,1420774946&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
        name: '天安门广场',
        level: 5,
        point: 4.6,
        evaluate: 5487,
        distance: 1.2,
        price: 108,
        tags: ['可订明日', '随时退']));
    pageList.add(ThemeTourismModel(
        imgUrl:
            'https://img2.baidu.com/it/u=614279430,1420774946&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
        name: '史家胡同博物馆',
        level: 5,
        point: 4.6,
        evaluate: 5487,
        distance: 1.2,
        price: 170,
        tags: ['可订明日', '随时退']));
    pageList.add(ThemeTourismModel(
        imgUrl:
            'https://img2.baidu.com/it/u=614279430,1420774946&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
        name: '故宫博物馆',
        level: 5,
        point: 4.6,
        evaluate: 5487,
        distance: 1.2,
        price: 140,
        tags: ['可订明日', '随时退']));
    pageList.add(ThemeTourismModel(
        imgUrl:
            'https://img2.baidu.com/it/u=614279430,1420774946&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
        name: '八达岭长城',
        level: 5,
        point: 4.5,
        evaluate: 5687,
        distance: 1.5,
        price: -1,
        tags: ['可订明日', '随时退']));
    pageList.add(ThemeTourismModel(
        imgUrl:
            'https://img2.baidu.com/it/u=614279430,1420774946&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
        name: '香山公园',
        level: 3,
        point: 4.3,
        evaluate: 3487,
        distance: 1.8,
        price: 0,
        tags: ['可订明日', '随时退']));
    pageList.add(ThemeTourismModel(
        imgUrl:
            'https://img2.baidu.com/it/u=614279430,1420774946&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
        name: '白塔寺',
        level: 5,
        point: 4.6,
        evaluate: 5487,
        distance: 1.2,
        price: 134,
        tags: ['可订明日', '随时退']));
    pageList.add(ThemeTourismModel(
        imgUrl:
            'https://img2.baidu.com/it/u=614279430,1420774946&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
        name: '湖广会馆',
        level: 5,
        point: 4.6,
        evaluate: 5487,
        distance: 1.2,
        price: -1,
        tags: ['可订明日', '随时退']));
    pageList.add(ThemeTourismModel(
        imgUrl:
            'https://img2.baidu.com/it/u=614279430,1420774946&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
        name: '北京古代建筑博物管',
        level: 5,
        point: 4.6,
        evaluate: 5487,
        distance: 1.2,
        price: 0,
        tags: ['可订明日', '随时退']));
    pageList.add(ThemeTourismModel(
        imgUrl:
            'https://img2.baidu.com/it/u=614279430,1420774946&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
        name: '北京杜莎夫人蜡像馆',
        level: 5,
        point: 4.6,
        evaluate: 5487,
        distance: 1.2,
        price: -1,
        tags: ['可订明日', '随时退']));
    pageList.add(ThemeTourismModel(
        imgUrl:
            'https://img2.baidu.com/it/u=614279430,1420774946&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
        name: '中国国家博物管',
        level: 5,
        point: 4.6,
        evaluate: 5487,
        distance: 1.2,
        price: 0,
        tags: ['可订明日', '随时退']));
    pageList.add(ThemeTourismModel(
        imgUrl:
            'https://img2.baidu.com/it/u=614279430,1420774946&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
        name: '天安门广场',
        level: 5,
        point: 4.6,
        evaluate: 5487,
        distance: 1.2,
        price: -1,
        tags: ['可订明日', '随时退']));
    pageList.add(ThemeTourismModel(
        imgUrl:
            'https://img2.baidu.com/it/u=614279430,1420774946&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
        name: '史家胡同博物馆',
        level: 5,
        point: 4.6,
        evaluate: 5487,
        distance: 1.2,
        price: 0,
        tags: ['可订明日', '随时退']));
  }
}

class PaySuccessView extends GetView<PaySuccessController> {
  const PaySuccessView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF7f7),
      appBar: AppBar(
        automaticallyImplyLeading: true,
        backgroundColor: Colors.white,
        leading: InkWell(
          onTap: () {
            Get.until((route) => route.settings.name == RoutePath.hotel);
          },
          child: Icon(
            Icons.arrow_back_ios,
            color: ColorsUtils.parseColorFromHexString(ColorsUtils.color3333),
            size: 20.w,
          ),
        ),
        leadingWidth: 40.w,
      ),
      body: CustomScrollView(
        slivers: [
          SliverToBoxAdapter(
            child: Column(
              children: [
                Container(
                  margin: EdgeInsets.only(top: 20.h, bottom: 30.h),
                  alignment: Alignment.center,
                  child: Text.rich(TextSpan(children: [
                    WidgetSpan(
                        child: ToolsUtils.assetImageSvg('u3893.svg', width: 22.w, height: 22.h)),
                    TextSpan(
                        text: ' 支付成功',
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.color09bb,
                            fontSize: 20.sp,
                            fontWeight: FontWeight.w700))
                  ])),
                ),
                Center(
                  child: Wrap(
                    spacing: 20.w,
                    alignment: WrapAlignment.spaceBetween,
                    crossAxisAlignment: WrapCrossAlignment.center,
                    children: [
                      Container(
                        constraints: BoxConstraints.expand(width: 90.w, height: 30.h),
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(15.h),
                            border: Border.all(
                                color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorCccc))),
                        child: TextButton(
                            onPressed: () {
                              Get.toNamed(RoutePath.home);

                              /// 事件
                              eventBus.fire(HomeChangeIndexEvent());
                            },
                            child: Text(
                              '返回首页',
                              style: StylesUtils.customTextStyle(color: ColorsUtils.color6666),
                            )),
                      ),
                      Container(
                        constraints: BoxConstraints.expand(width: 90.w, height: 30.h),
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(15.h),
                            border: Border.all(
                                color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorCccc))),
                        child: TextButton(
                            onPressed: () {
                              Get.toNamed(RoutePath.hotelOrderList);
                            },
                            child: Text(
                              '查看订单',
                              style: StylesUtils.customTextStyle(color: ColorsUtils.color6666),
                            )),
                      )
                    ],
                  ),
                ),
                Container(
                    margin: EdgeInsets.only(top: 15.h, bottom: 20.h),
                    alignment: Alignment.center,
                    child: Container(
                      width: 345,
                      height: 90,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10.w), color: Colors.white),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Container(
                            width: 90,
                            decoration: BoxDecoration(
                                color: ColorsUtils.rgba(255, 82, 82, 1),
                                borderRadius: BorderRadius.only(
                                    topLeft: Radius.circular(10.w),
                                    bottomLeft: Radius.circular(10.w))),
                            child: Column(
                              children: [
                                Expanded(
                                    child: Container(
                                  alignment: Alignment.bottomCenter,
                                  child: Text(
                                    '无门槛',
                                    style: StylesUtils.customTextStyle(fontSize: 12.sp),
                                  ),
                                )),
                                Container(
                                  height: 65,
                                  alignment: Alignment.center,
                                  child: Text.rich(TextSpan(children: [
                                    TextSpan(
                                        text: '5',
                                        style: StylesUtils.customTextStyle(
                                            fontWeight: FontWeight.w700, fontSize: 36.sp)),
                                    TextSpan(
                                        text: ' 元',
                                        style: StylesUtils.customTextStyle(fontSize: 12.sp))
                                  ])),
                                )
                              ],
                            ),
                          ),
                          Expanded(
                              child: Container(
                            padding: EdgeInsets.only(left: 10.w),
                            child: Stack(
                              children: [
                                Column(
                                  children: [
                                    Expanded(
                                      child: Container(
                                        padding: const EdgeInsets.only(top: 15),
                                        alignment: Alignment.centerLeft,
                                        child: Text(
                                          '新人奖励红包',
                                          style: StylesUtils.customTextStyle(
                                              fontSize: 16.sp,
                                              color: ColorsUtils.color0000,
                                              fontWeight: FontWeight.w700),
                                        ),
                                      ),
                                    ),
                                    Expanded(
                                      child: Container(
                                        padding: const EdgeInsets.only(bottom: 15),
                                        alignment: Alignment.centerLeft,
                                        child: Text(
                                          '有效期至长期',
                                          style: StylesUtils.customTextStyle(
                                              fontSize: 12.sp, color: ColorsUtils.color7979),
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                                Positioned(
                                  top: 0,
                                  right: 15,
                                  bottom: 0,
                                  child: Center(
                                    child: Container(
                                      constraints: BoxConstraints.expand(width: 70.w, height: 30.h),
                                      decoration: BoxDecoration(
                                          borderRadius: BorderRadius.circular(5.w),
                                          gradient: LinearGradient(
                                              colors: [
                                                ColorsUtils.rgba(254, 111, 73, 1),
                                                ColorsUtils.rgba(234, 52, 45, 1)
                                              ],
                                              stops: const [
                                                0.0,
                                                1.0
                                              ],
                                              transform:
                                                  GradientRotation(RadianUtils.angleToRadian(0)))),
                                      alignment: Alignment.center,
                                      child: InkWell(
                                          onTap: () {},
                                          child: Text(
                                            '立即领取',
                                            style: StylesUtils.customTextStyle(fontSize: 12.sp),
                                          )),
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ))
                        ],
                      ),
                    )),
                Container(
                  padding: EdgeInsets.only(bottom: 15.h),
                  alignment: Alignment.center,
                  child: Text.rich(TextSpan(children: [
                    TextSpan(
                        text: '为',
                        style: StylesUtils.customTextStyle(
                            fontSize: 16.sp,
                            color: ColorsUtils.color3333,
                            fontWeight: FontWeight.w700)),
                    TextSpan(
                      text: '/ ',
                      style: StylesUtils.customTextStyle(
                          fontSize: 16.sp,
                          color: ColorsUtils.colorCccc,
                          fontWeight: FontWeight.w700),
                    ),
                    TextSpan(
                        text: '您',
                        style: StylesUtils.customTextStyle(
                            fontSize: 16.sp,
                            color: ColorsUtils.color3333,
                            fontWeight: FontWeight.w700)),
                    TextSpan(
                      text: '/ ',
                      style: StylesUtils.customTextStyle(
                          fontSize: 16.sp,
                          color: ColorsUtils.colorCccc,
                          fontWeight: FontWeight.w700),
                    ),
                    TextSpan(
                        text: '推',
                        style: StylesUtils.customTextStyle(
                            fontSize: 16.sp,
                            color: ColorsUtils.color3333,
                            fontWeight: FontWeight.w700)),
                    TextSpan(
                      text: '/ ',
                      style: StylesUtils.customTextStyle(
                          fontSize: 16.sp,
                          color: ColorsUtils.colorCccc,
                          fontWeight: FontWeight.w700),
                    ),
                    TextSpan(
                        text: '荐',
                        style: StylesUtils.customTextStyle(
                            fontSize: 16.sp,
                            color: ColorsUtils.color3333,
                            fontWeight: FontWeight.w700)),
                  ])),
                ),
              ],
            ),
          ),
          SliverPadding(
            padding: EdgeInsets.symmetric(horizontal: 15.w),
            sliver: SliverToBoxAdapter(
              child: StaggeredGrid.count(
                crossAxisCount: 2,
                crossAxisSpacing: 5.w,
                mainAxisSpacing: 10.h,
                children: controller.pageList.map((row) {
                  return Container(
                    color: Colors.white,
                    child: Column(
                      children: [
                        ClipRRect(
                          borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(5.w), topRight: Radius.circular(5.w)),
                          child: CachedNetworkImage(
                            imageUrl: row.imgUrl,
                            height: 170.h,
                            fit: BoxFit.fill,
                          ),
                        ),
                        Container(
                          padding: EdgeInsets.only(top: 10.h, left: 10.w),
                          alignment: Alignment.centerLeft,
                          child: Text(
                            row.name,
                            style: StylesUtils.customTextStyle(
                                fontWeight: FontWeight.w700,
                                color: ColorsUtils.color3333,
                                fontSize: 15.sp),
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                          ),
                        ),
                        Container(
                          padding: EdgeInsets.only(top: 10.h, bottom: 10.h, left: 10.w),
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '${row.level}A  ${row.point}分  ${row.evaluate}人评价',
                            style: StylesUtils.customTextStyle(
                                fontSize: 12.sp, color: ColorsUtils.color7979),
                          ),
                        ),
                        Container(
                            padding: EdgeInsets.only(bottom: 10.h, right: 10.w, left: 10.w),
                            child: SizedBox(
                              height: 25.h,
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                  Text(
                                    '距您 ${row.distance}km',
                                    style: StylesUtils.customTextStyle(
                                        fontSize: 12.sp, color: ColorsUtils.color7979),
                                  ),
                                  getChildPrice(row.price)
                                ],
                              ),
                            ))
                      ],
                    ),
                  );
                }).toList(),
              ),
            ),
          )
        ],
      ),
    );
  }

  Text getChildPrice(int price) {
    if (price < 0) {
      return Text(
        '免费预约',
        style: StylesUtils.customTextStyle(
          color: ColorsUtils.color6666,
        ),
      );
    }
    if (price == 0) {
      return Text(
        '免费',
        style: StylesUtils.customTextStyle(color: ColorsUtils.color6666),
      );
    }
    return Text.rich(TextSpan(children: [
      TextSpan(
          text: '￥',
          style: StylesUtils.customTextStyle(fontSize: 12.sp, color: ColorsUtils.colorD900)),
      TextSpan(
          text: '$price',
          style: StylesUtils.customTextStyle(
              fontSize: 20.sp, fontWeight: FontWeight.w700, color: ColorsUtils.colorD900)),
      TextSpan(
          text: '起',
          style: StylesUtils.customTextStyle(fontSize: 12.sp, color: ColorsUtils.color7979))
    ]));
  }
}
